<template>
  <button @click="deriveExcel">导出excel</button>
  <el-table :data="tableData" style="width: 100%" id="table">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup lang="ts" name="ExportExcel">
  import { exportExcel } from "@/utils/exportExcel";

  const tableData = [
    {
      date: "2016-05-03",
      name: "Tom",
      address: "Angeles",
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "Angeles",
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "Angeles",
    },
  ];

  const deriveExcel = () => {
    const tableEl = document.getElementById("table") as HTMLTableElement;
    exportExcel(tableEl, "导出excel");
  };
</script>

<style scoped lang="scss"></style>
